<template>

    <span class="c-loading">
        <span class="c-loading-spot spot1"></span>
        <span class="c-loading-spot spot2"></span>
        <span class="c-loading-spot spot3"></span>
        <span class="c-loading-spot spot4"></span>
    </span>

</template>
<script>
    export default {
        props: {},
        data() {
            return {}
        },
        methods: {},
        components: {},
        mounted() {
        },
        created() {

        }
    }
</script>

<style lang="less">
    .c-loading{
        display: inline-block;
        &-spot{
            display: inline-block;
            width: 0.1rem;
            height: 0.1rem;
            border-radius: 100%;
            background: #fff;
            animation: scale 1.2s infinite;
            margin-left: 0.05rem;
        }
        .spot2{
            animation-delay: -1.1s;
        }
        .spot3{
            animation-delay: -1.0s;
        }
        .spot4{
            animation-delay: -0.9s;
        }
    }

    @keyframes scale {
        0%{
            transform: scale(1.5);
        }
        100%{
            transform: scale(0.9);
        }
    }
</style>